<!--
 * @Author: lihaogn
 * @Date: 2021-12-14 21:41:08
 * @LastEditTime: 2022-01-19 17:57:10
 * @LastEditor: lihaogn
 * @Description: 基本的包含表格的页面
 * @FilePath: \lix-admin-vue2\src\views\develop\template\LixTableViewTemplate.vue
-->

<template>
  <LixTableView :show-tool="true" :show-pagination="true">
    <!-- 工具栏 -->
    <template #tool-left>
      <div class="gl-flex-row">
        <!-- 新增 -->
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          size="small"
          @click="newDialogVisible = true"
          >新增
        </el-button>
        <el-alert
          style="margin-left: 10px;"
          title="可以选择需要显示的列；可以进行简单的拖拽，暂不支持树结构的拖拽；"
          type="warning"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
    </template>
    <template #tool-right>
      <!-- 导入 -->
      <el-button
        size="small"
        type="success"
        plain
        icon="el-icon-upload2"
        @click="importExcelDialogVisible = true"
        >导入
      </el-button>
      <!-- 导出 -->
      <el-button
        size="small"
        type="success"
        plain
        icon="el-icon-download"
        @click="exportDialogVisible = true"
        >导出
      </el-button>
      <!-- 选择列 -->
      <LixTableSelectColumn
        :columns="columns"
        @change="handleTableColumnsChange"
      />
    </template>
    <!-- 表格 -->
    <template #table="{maxHeight}">
      <!-- 表格 -->
      <el-table
        id="testTable"
        ref="testTableRef"
        row-key="id"
        border
        v-loading="loading"
        :data="tableData"
        :max-height="maxHeight"
      >
        <!-- 序号 -->
        <el-table-column label="#" type="index"></el-table-column>

        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <template v-if="item.prop === 'operation'">
              <el-button type="text" size="medium">
                修改
              </el-button>
              <el-popconfirm
                style="margin-left:10px;"
                placement="top"
                icon="el-icon-info"
                icon-color="red"
                title="确认删除？"
                @confirm="handleDelete(scope.row)"
              >
                <el-button slot="reference" type="text" size="medium"
                  >删除
                </el-button>
              </el-popconfirm>
            </template>
            <template v-else slot-scope="scope">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <!-- <el-table-column label="操作" width="236px"> </el-table-column> -->
      </el-table>
    </template>
    <!-- 分页 -->
    <template #pagination>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30]"
        :total="total"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </template>
  </LixTableView>
</template>

<script>
import LixTableView from '../../../components/template/lix-table-view/index.vue'
import LixTableSelectColumn from '../../../components/common/lix-table-select-column/index.vue'
import { initSortable } from '../../../utils/drag-table'

export default {
  components: { LixTableView, LixTableSelectColumn },
  data() {
    return {
      newDialogVisible: false,
      importExcelDialogVisible: false,
      exportDialogVisible: false,
      loading: false,
      tableData: [
        {
          id: '1',
          name: '超级管理员',
          description: '测试',
          updatedAt: '2021-12-12 23:59'
        },
        {
          id: '2',
          name: '管理员',
          description: '测试',
          updatedAt: '2021-12-26 23:59'
        },
        {
          id: '3',
          name: '用户',
          description: '测试',
          updatedAt: '2021-12-26 23:59',
          children: [
            {
              id: '3-1',
              name: '普通用户',
              description: '测试',
              updatedAt: '2021-12-26 23:59'
            }
          ]
        }
      ],
      columns: [
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '描述',
          prop: 'description'
        },
        {
          label: '修改时间',
          prop: 'updatedAt'
        },
        {
          label: '操作',
          prop: 'operation'
        }
      ],
      tableColumns: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  mounted() {
    // 初始化拖拽表格
    initSortable(this.$refs.testTableRef, this.tableData)
  },
  methods: {
    handleDelete(row) {},
    handleSizeChange(size) {},
    handleCurrentChange(currentPage) {},
    /**
     * @author: lihaogn
     * @Date: 2021-12-26 16:02:06
     * @description: 选择列事件
     * @param {*} columns:Array - 选择到的列
     * @return {*}
     */
    handleTableColumnsChange(columns) {
      this.tableColumns = columns
    }
  }
}
</script>

<style lang="less" scoped></style>
